﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
    <!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
</head>
<body>
    <div id="app-1">
        <!--多行文本-->
        <span>多行文本是：</span>
        <p style="white-space:pre-line">{{msg}}</p>
        <br />
        <textarea v-model="msg" placeholder="加多行"></textarea>
    </div>
    <div id="app-3">
        <select v-model="selected" multiple style="width:50px;">
            <option>es5</option>
            <option>es6</option>
            <option>TypeScript</option>
        </select>
        <br />
        <span>您选择的是:{{selected}}</span>
    </div>

    <div id="app-4">
        <select v-model="selected">
            <option v-for="op in options" :value="op.value">
                {{op.text}}
            </option>
        </select>
        <span>选择的是:{{selected}}</span>
    </div>

    <!-- 当选中时，`picked` 为字符串 "a" -->
    <input type="radio" v-model="picked" value="a">

    <!-- `toggle` 为 true 或 false -->
    <input type="checkbox" v-model="toggle">

    <!-- 当选中第一个选项时，`selected` 为字符串 "abc" -->
    <select v-model="selected">
        <option value="abc">ABC</option>
    </select>
    <input type="checkbox"
           v-model="toggle"
           true-value="yes"
           false-value="no">

    <!--// 当选中时
    vm.toggle === 'yes'
    // 当没有选中时
    vm.toggle === 'no'

        这里的 true-value 和 false-value
        特性并不会影响输入控件的 value 特性，
        因为浏览器在提交表单时并不会包含未被选中的复选框。
        如果要确保表单中这两个值中的一个能够被提交，
        (比如“yes”或“no”)，请换用单选按钮。-->


    <input type="radio" v-model="pick" v-bind:value="a">

    <!--// 当选中时
    vm.pick === vm.a-->

    <select v-model="selected">
        <!-- 内联对象字面量 -->
        <option v-bind:value="{ number: 123 }">123</option>
    </select>

    <!--// 当选中时
    typeof vm.selected // => 'object'
    vm.selected.number // => 123-->
    <!--【.lazy】在默认情况下，

        v-model 在每次 input 事件触发后将输入框的值与数据进行同步
        (除了上述输入法组合文字时)。
        你可以添加 lazy 修饰符，
        从而转变为使用 change 事件进行同步：
        
        -->
    <!-- 在“change”时而非“input”时更新 -->
    <input v-model.lazy="msg">

    <!--【.number】

    如果想自动将用户的输入值转为数值类型，
        可以给 v-model 添加 number 修饰符：-->

    <input v-model.number="age" type="number">

    <!--这通常很有用，因为即使在 type="number" 时，
        HTML 输入元素的值也总会返回字符串。
        如果这个值无法被 parseFloat() 解析，
        则会返回原始的值。-->

    <!--【.trim】

        如果要自动过滤用户输入的首尾空白字符，
        可以给 v-model 添加 trim 修饰符：

        -->
    <input v-model.trim="msg">
    <script type="text/javascript">
        var app1 = new Vue({
            el: '#app-1',
            data: {
                msg: ""
            }
        })

        var app2 = new Vue({
            el: '#app-2',
            data: {
                checkedNames: []
            }
        })

        var app3 = new Vue({
            el: '#app-3',
            data: {
                selected: []
            }
        })

        var app4 = new Vue({
            el: '#app-4',
            data: {
                selected: 'A',
                options: [
                    { text: 'One', value: 'A' },
                    { text: 'Two', value: 'B' },
                    { text: 'Three', value: 'C' }
                ]
            }
        })


                                                                    /*
                                                                     * v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值
                                                                     *
                                                                     * 而总是将 Vue 实例的数据作为数据来源。
                                                                     *
                                                                     * 你应该通过 JavaScript 在组件的 data 选项中声明初始值。
                                                                     *
                                                                     * */


                                                                    /*
                                                                     * v-model 在内部使用不同的属性为不同的输入元素并抛出不同的事件：
                                                                     *
                                                                     *text 和 textarea 元素使用 value 属性和 input 事件；
                                                                     *
                                                                     * checkbox 和 radio 使用 checked 属性和 change 事件；
                                                                     *
                                                                     * select 字段将 value 作为 prop 并将 change 作为事件。
                                                                     *
                                                                     */
    </script>
</body>
</html>